<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				perspective: 880px;
			}
		#box{
			width: 200px;
			height: 200px;
			margin: 300px auto;
			position: relative;
			transform-style: preserve-3d;
			transition: 800s;/*动画过渡*/
				transform-origin:50% 50% -101px ;
			
		}
		#box div{
			position: absolute;
			width: 200px;
			height: 200px;
			border: 2px solid red;
		}
		#box div:nth-child(1){
			transform: translateZ(-204px)
		}
			#box div:nth-child(2){
			
		}
			#box div:nth-child(3){
			bottom: 202px;
			transform-origin: bottom;
			transform: rotateX(90deg);
		}
			#box div:nth-child(4){
			top: 204px;
			transform-origin: top;
			transform: rotateX(-90deg);
		}
			#box div:nth-child(5){
			left: -204px;
			transform-origin:right;
			transform: rotateY(-90deg);
			
		}
		#box div:nth-child(6){
			right: -204px;
			transform-origin:left;
			transform: rotateY(90deg);
		}
		#box:hover
		{
			transform: rotateY(360000deg);
		}
		#box img{
			 width: 200px;
			 height: 200px;
		}
		</style>
	</head>
	<body>
	<div id="box">
		<div><img src="img/1.png"/></div>
		<div><img src="img/2.png"/></div>
		<div><img src="img/3.png"/></div>
		<div><img src="img/4.png"/></div>
		<div><img src="img/5.jpg"/></div>
		<div><img src="img/6.png"/></div>
	</div>
	
	
	</body>
</html>
